<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airbnb爱彼迎 - 全球民宿_公寓_短租_住宿_预订平台</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/tsk.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
    <script src="js/base.js" type="module"></script>
    <script src="js/request.js" type="module"></script>
    <script src="js/lodger.js" type="module"></script>
</head>

<body>
    <div class="PromptBox"></div>

    <div class="main" style="display: block;">
        <div class="fixbox">
            <div class="mainbody" style="width: 1200px;">
                <!-- 导航 -->
                <div class="nav" style="width: 1200px;">
                    <div class="nav-l">
                        <a href="index.html"><img src="picture/logo.png" alt=""></a>
                    </div>
                    <div class="nav-m">

                    </div>
                    <div class="nav-r">
                        <div class="nav-r-2">
                            <div class="nav-r-2-svg1">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                    role="presentation" focusable="false"
                                    style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 3; overflow: visible;">
                                    <g fill="none">
                                        <path d="M2 16h28M2 24h28M2 8h28"></path>
                                    </g>
                                </svg>
                            </div>
                            <div class="nav-r-2-svg2">
                                <div class="nav-r-2-svg2">
                                    <img src="https://z1.muscache.cn/defaults/user_pic-50x50.png?v=3&im_w=240" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="nav-r-1">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"
                                role="presentation" focusable="false"
                                style="display: block; height: 16px; width: 16px; fill: currentcolor;">
                                <path
                                    d="M8 .25a7.77 7.77 0 0 1 7.75 7.78 7.75 7.75 0 0 1-7.52 7.72h-.25A7.75 7.75 0 0 1 .25 8.24v-.25A7.75 7.75 0 0 1 8 .25zm1.95 8.5h-3.9c.15 2.9 1.17 5.34 1.88 5.5H8c.68 0 1.72-2.37 1.93-5.23zm4.26 0h-2.76c-.09 1.96-.53 3.78-1.18 5.08A6.26 6.26 0 0 0 14.17 9zm-9.67 0H1.8a6.26 6.26 0 0 0 3.94 5.08 12.59 12.59 0 0 1-1.16-4.7l-.03-.38zm1.2-6.58-.12.05a6.26 6.26 0 0 0-3.83 5.03h2.75c.09-1.83.48-3.54 1.06-4.81zm2.25-.42c-.7 0-1.78 2.51-1.94 5.5h3.9c-.15-2.9-1.18-5.34-1.89-5.5h-.07zm2.28.43.03.05a12.95 12.95 0 0 1 1.15 5.02h2.75a6.28 6.28 0 0 0-3.93-5.07z">
                                </path>
                            </svg>
                        </div>
                        <a href="publish.html" class="add_fangyuan" style="display: none;">发布房源</a>


                        <div class="nav_box">
                            <a href="order.html">订单</a>
                            <a href="wish.html">心愿单</a>
                            <a href="lodger.html">账号</a>
                            <a href="login.html">退出</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mainbody">

            <!-- 创建与获取个人资料 -->
            <div class="lodger" style="display: flex;">
                <div class="lodger_l">
                    <div class="lodger_l_fixed" style="position: fixed;top: 120px;">
                        <div class="lodger_l_t">
                            <div class="lodger_img">
                                <img src="https://z1.muscache.cn/defaults/user_pic-50x50.png?v=3&im_w=240" alt="">
                            </div>
                            <div class="lodger_name"></div>
                            <div>房客/体验参与者</div>
                        </div>
                        <div class="lodger_l_b">
                            <div class="lodger_l_b_t">
                                <div style="font-size: 22px;">
                                    <span class="lodger_l_b_t_span"></span>的已确认信息
                                </div>
                                <div style="font-size: 16px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; fill: none; height: 24px; width: 24px; stroke: currentcolor; stroke-width: 2.66667; overflow: visible;">
                                        <path fill="none" d="m4 16.5 8 8 16-16"></path>
                                    </svg>
                                    <span style="font-weight: normal;">身份认证</span>
                                </div>
                                <div style="font-size: 16px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; fill: none; height: 24px; width: 24px; stroke: currentcolor; stroke-width: 2.66667; overflow: visible;">
                                        <path fill="none" d="m4 16.5 8 8 16-16"></path>
                                    </svg>
                                    <span style="font-weight: normal;">电子邮件</span>
                                </div>
                                <div style="font-size: 16px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; fill: none; height: 24px; width: 24px; stroke: currentcolor; stroke-width: 2.66667; overflow: visible;">
                                        <path fill="none" d="m4 16.5 8 8 16-16"></path>
                                    </svg>
                                    <span style="font-weight: normal;">手机号</span>
                                </div>
                                <div style="font-size: 14px; text-decoration: underline;">了解身份认证</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lodger_r" style="display: none;">
                    <div class="lodger_r_m">
                        <div>创建你的个人资料</div>
                        <div>爱彼迎个人资料是你的重要信息，会体现在每笔订单中。请创建个人资料，让其他房东/体验达人和房客/体验参与者了解你的基⁠本⁠情⁠况。</div>
                        <div class="create_lodger">创建个人资料</div>
                    </div>
                </div>
                <!-- 获取 -->
                <div class="lodger_gain" style="display: none;">
                    <h2>关于 <span></span> </h2>
                    <div class="gain_editor" style="margin-top: 10px;cursor: pointer;">编辑个人信息</div>
                    <ul class="gain_ul">
                        <li>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                    role="presentation" focusable="false"
                                    style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                    <path
                                        d="M13.7 13.93a4 4 0 0 1 5.28.6l.29.37 4.77 6.75a4 4 0 0 1 .6 3.34 4 4 0 0 1-4.5 2.91l-.4-.08-3.48-.93a1 1 0 0 0-.52 0l-3.47.93a4 4 0 0 1-2.94-.35l-.4-.25a4 4 0 0 1-1.2-5.2l.23-.37 4.77-6.75a4 4 0 0 1 .96-.97zm3.75 1.9a2 2 0 0 0-2.98.08l-.1.14-4.84 6.86a2 2 0 0 0 2.05 3.02l.17-.04 4-1.07a1 1 0 0 1 .5 0l3.97 1.06.15.04a2 2 0 0 0 2.13-2.97l-4.95-7.01zM27 12a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM5 12a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm22 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM5 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6-10a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm10 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM11 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z">
                                    </path>
                                </svg>
                                <span class="gain_pet"></span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                    role="presentation" focusable="false"
                                    style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                    <path
                                        d="M20 2a2 2 0 0 1 2 1.85V6h6a3 3 0 0 1 3 2.82V27a3 3 0 0 1-2.82 3H4a3 3 0 0 1-3-2.82V9a3 3 0 0 1 2.82-3H10V4a2 2 0 0 1 1.85-2H12zm8 6H4a1 1 0 0 0-1 .88V12a3 3 0 0 0 2.82 3H13v2H6a4.98 4.98 0 0 1-3-1v11a1 1 0 0 0 .88 1H28a1 1 0 0 0 1-.88V16c-.78.59-1.74.95-2.78 1h-7.17v-2H26a3 3 0 0 0 3-2.82V9a1 1 0 0 0-.88-1zm-10 4a1 1 0 0 1 1 .88V19a1 1 0 0 1-.88 1H14a1 1 0 0 1-1-.88V13a1 1 0 0 1 .88-1H14zm-1 2h-2v4h2zm3-10h-8v2h8z">
                                    </path>
                                </svg>
                                <span class="gain_career"></span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                    role="presentation" focusable="false"
                                    style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                    <path
                                        d="m31.47 10.12-15-8a1 1 0 0 0-.94 0l-15 8a1 1 0 0 0 0 1.76L4 13.73V23a1 1 0 0 0 .52.88l11 6a1 1 0 0 0 .96 0l11-6A1 1 0 0 0 28 23v-9.27l2-1.06V23h2V11a1 1 0 0 0-.53-.88zM26 22.4l-10 5.45-10-5.45V14.8l9.53 5.08a1 1 0 0 0 .94 0L26 14.8v7.6zm-10-4.54L3.12 11 16 4.13 28.88 11 16 17.87z">
                                    </path>
                                </svg>
                                <span class="gain_school"></span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                    role="presentation" focusable="false"
                                    style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                    <path
                                        d="m20.61 8.21.1.08 3 3a1 1 0 0 1 .08 1.32l-.08.1-18 18a1 1 0 0 1-1.32.08l-.1-.08-3-3a1 1 0 0 1-.08-1.32l.08-.1 18-18a1 1 0 0 1 1.32-.08zM16 14.41 3.41 27 5 28.58 17.59 16zm4-4-2.58 2.6L19 14.58 21.58 12zm6-.41h5v2h-5zm2.3-7.7 1.4 1.4-4 4-1.4-1.4zM22 1v5h-2V1z">
                                    </path>
                                </svg>
                                <span class="gain_skill"></span>
                            </div>
                        </li>
                    </ul>
                    <div class="gain_profile">
                        <div style="font-size: 24px;">个人简介</div>
                        <div class="gain_personal" style="font-size: 14px;">

                        </div>
                    </div>

                </div>
            </div>




            <!-- 编辑个人资料 -->
            <div class="editor" style="display: none; position: relative;">
                <button class="editor_wish">
                    <span class="ism5y6t dir dir-ltr"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
                            aria-hidden="true" role="presentation" focusable="false"
                            style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;">
                            <g fill="none">
                                <path d="M4 16h26M15 28 3.7 16.7a1 1 0 0 1 0-1.4L15 4"></path>
                            </g>
                        </svg></span>
                </button>
                <div class="editorbody">
                    <div class="editorbody_l">
                        <img src="https://z1.muscache.cn/defaults/user_pic-50x50.png?v=3&im_w=240" alt="">
                        <button class="camera" id="image-input">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                role="presentation" focusable="false"
                                style="display: block; height: 16px; width: 16px; fill: currentcolor;">
                                <path
                                    d="M17.59 2a2.01 2.01 0 0 1 1.41.59L21.41 5H25a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V10a5 5 0 0 1 5-5h3.62L13 2.6a2.01 2.01 0 0 1 1.42-.6zM16 8.5a8.51 8.51 0 0 0 0 17 8.51 8.51 0 0 0 0-17zm0 3a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm-10-3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z">
                                </path>
                            </svg>
                            <span>添加</span>
                            <input type="file" id="image-input" accept="image/*">
                        </button>
                    </div>
                    <div class="editorbody_r">
                        <h2>你的个人资料</h2>
                        <div style="color: #717171; font-size: 16px; margin-bottom: 20px;">你提供的信息将在爱彼迎平台上展示，让其他用户能够了解你。
                        </div>
                        <div class="grid-container">
                            <div class="grid-item" id="1">
                                <div class="grid-item-mask"></div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                        <path
                                            d="M13.7 13.93a4 4 0 0 1 5.28.6l.29.37 4.77 6.75a4 4 0 0 1 .6 3.34 4 4 0 0 1-4.5 2.91l-.4-.08-3.48-.93a1 1 0 0 0-.52 0l-3.47.93a4 4 0 0 1-2.94-.35l-.4-.25a4 4 0 0 1-1.2-5.2l.23-.37 4.77-6.75a4 4 0 0 1 .96-.97zm3.75 1.9a2 2 0 0 0-2.98.08l-.1.14-4.84 6.86a2 2 0 0 0 2.05 3.02l.17-.04 4-1.07a1 1 0 0 1 .5 0l3.97 1.06.15.04a2 2 0 0 0 2.13-2.97l-4.95-7.01zM27 12a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM5 12a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm22 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM5 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6-10a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm10 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM11 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z">
                                        </path>
                                    </svg>
                                    <div class="grid-item-con1">宠物</div>
                                    <div class="grid-item-con2" style="display: none;">宠物：<span></span></div>
                                </div>
                            </div>
                            <div class="grid-item" id="2">
                                <div class="grid-item-mask"></div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                        <path
                                            d="M20 2a2 2 0 0 1 2 1.85V6h6a3 3 0 0 1 3 2.82V27a3 3 0 0 1-2.82 3H4a3 3 0 0 1-3-2.82V9a3 3 0 0 1 2.82-3H10V4a2 2 0 0 1 1.85-2H12zm8 6H4a1 1 0 0 0-1 .88V12a3 3 0 0 0 2.82 3H13v2H6a4.98 4.98 0 0 1-3-1v11a1 1 0 0 0 .88 1H28a1 1 0 0 0 1-.88V16c-.78.59-1.74.95-2.78 1h-7.17v-2H26a3 3 0 0 0 3-2.82V9a1 1 0 0 0-.88-1zm-10 4a1 1 0 0 1 1 .88V19a1 1 0 0 1-.88 1H14a1 1 0 0 1-1-.88V13a1 1 0 0 1 .88-1H14zm-1 2h-2v4h2zm3-10h-8v2h8z">
                                        </path>
                                    </svg>
                                    <div class="grid-item-con1">我的职业</div>
                                    <div class="grid-item-con2" style="display: none;">我的职业：<span></span></div>
                                </div>
                            </div>
                            <div class="grid-item" id="3">
                                <div class="grid-item-mask"></div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                        <path
                                            d="m31.47 10.12-15-8a1 1 0 0 0-.94 0l-15 8a1 1 0 0 0 0 1.76L4 13.73V23a1 1 0 0 0 .52.88l11 6a1 1 0 0 0 .96 0l11-6A1 1 0 0 0 28 23v-9.27l2-1.06V23h2V11a1 1 0 0 0-.53-.88zM26 22.4l-10 5.45-10-5.45V14.8l9.53 5.08a1 1 0 0 0 .94 0L26 14.8v7.6zm-10-4.54L3.12 11 16 4.13 28.88 11 16 17.87z">
                                        </path>
                                    </svg>
                                    <div class="grid-item-con1">曾经就读的学校</div>
                                    <div class="grid-item-con2" style="display: none;">曾经就读的学校：<span></span></div>
                                </div>
                            </div>
                            <div class="grid-item" id="4">
                                <div class="grid-item-mask"></div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"
                                        role="presentation" focusable="false"
                                        style="display: block; height: 24px; width: 24px; fill: var(--f-k-smk-x);">
                                        <path
                                            d="m20.61 8.21.1.08 3 3a1 1 0 0 1 .08 1.32l-.08.1-18 18a1 1 0 0 1-1.32.08l-.1-.08-3-3a1 1 0 0 1-.08-1.32l.08-.1 18-18a1 1 0 0 1 1.32-.08zM16 14.41 3.41 27 5 28.58 17.59 16zm4-4-2.58 2.6L19 14.58 21.58 12zm6-.41h5v2h-5zm2.3-7.7 1.4 1.4-4 4-1.4-1.4zM22 1v5h-2V1z">
                                        </path>
                                    </svg>
                                    <div class="grid-item-con1">我最无用的技能</div>
                                    <div class="grid-item-con2" style="display: none;">我最无用的技能：<span></span></div>
                                </div>
                            </div>
                        </div>
                        <div class="personal_profile">
                            <div style="font-size: 26px; color: #222; font-weight: 700;">关于你</div>
                            <div>
                                <div class="add_personal" style="color: #717171; font-size: 16px;">写一些有趣又有吸引力的内容。</div>
                                <div class="add_profile"
                                    style="color: #222; font-size: 16px; text-decoration: underline; font-weight: 700; cursor: pointer;">
                                    添加个人简历</div>
                            </div>
                        </div>
                        <div class="complete">完成</div>
                    </div>
                </div>
            </div>

            <div class="editormask"></div>
            <div class="editorbox petbox" style="display: none;">
                <div class="editorbox_t">
                    <div class="delete_wish_close">
                        <div class="delete_wish_close_mask"></div>
                        <button aria-label="删除「哈哈哈」（未共享）" type="button" class="l1ovpqvx cwgqky9 dir dir-ltr"><span
                                class="i13tpwjr dir dir-ltr"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
                                    aria-hidden="true" role="presentation" focusable="false"
                                    style="display: block; height: 12px; width: 12px; fill: currentcolor;">
                                    <path
                                        d="m14.3.3 1.4 1.4L9.43 8l6.29 6.3-1.42 1.4L8 9.43 1.7 15.7.3 14.29 6.57 8 .3 1.7 1.71.3 8 6.57z">
                                    </path>
                                </svg></span></button>
                    </div>
                </div>
                <div class="editorbox_m">
                    <div class="editorbox_mt">
                        <div class="editorbox_mt1"></div>
                        <div class="editorbox_mt2"></div>
                    </div>
                    <div>
                        <div class="editorbox_m_t">
                            <div class="editorbox_m_name wishcreate_m_name"></div>
                            <input type="text">
                        </div>
                        <div class="wishcreate_m_b" style="text-align: right; font-weight: 700;">
                            <span class="min_num">0</span>/<span class="max_num">40</span>个字符
                        </div>
                    </div>
                </div>
                <div class="editorbox_b">
                    <div class="editorbox_save">保存</div>
                </div>
            </div>

            <div class="editorbox personalbox" style="display: none; height: 474px;">
                <div class="editorbox_t">
                    <div class="delete_wish_close add_delete_wish_close">
                        <div class="delete_wish_close_mask"></div>
                        <button aria-label="删除「哈哈哈」（未共享）" type="button" class="l1ovpqvx cwgqky9 dir dir-ltr"><span
                                class="i13tpwjr dir dir-ltr"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
                                    aria-hidden="true" role="presentation" focusable="false"
                                    style="display: block; height: 12px; width: 12px; fill: currentcolor;">
                                    <path
                                        d="m14.3.3 1.4 1.4L9.43 8l6.29 6.3-1.42 1.4L8 9.43 1.7 15.7.3 14.29 6.57 8 .3 1.7 1.71.3 8 6.57z">
                                    </path>
                                </svg></span></button>
                    </div>
                </div>
                <div class="editorbox_m" style="height: 329px;">
                    <div class="editorbox_mt">
                        <div>关于你</div>
                        <div>简单介绍一下自己，让未来的房东/体验达人或房客/体验参与者对你有所了⁠解。</div>
                    </div>
                    <div>
                        <div class="personalbox_m_t">
                            <textarea name="" id="" cols="" rows=""></textarea>
                        </div>
                        <div class="wishcreate_m_b add_wishcreate_m_b" style="text-align: right; font-weight: 700;">
                            <span class="min_num">0</span>/<span class="max_num">250</span>个字符
                        </div>
                    </div>
                </div>
                <div class="editorbox_b">
                    <div class="editorbox_save add_save">保存</div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>